<template>
  <el-dialog title="访问权限" :close-on-click-modal="false" :width="900">
    <div class="myTree scroll-style" style="height: 450px; overflow-y: auto">
      <el-tree
        ref="menuTreeRef"
        :data="menuTree"
        :props="menuTreeProps"
        node-key="id"
        show-checkbox
        @check="changeSelectedMenuIds"
        highlight-current
        check-strictly
      ></el-tree>
    </div>
    <div class="myButton">
      <div class="centerUp">
        <el-button @click="allChecked">全选</el-button>
      </div>
      <div class="centerDown">
        <el-button @click="allNoChecked">全不选</el-button>
      </div>
    </div>
    <div class="myList">
      <el-table :height="450" :data="selectedList" size="small">
        <el-table-column
          prop="title"
          align="left"
          label="已选权限"
        ></el-table-column>
        <el-table-column width="40%" align="center" label="删除" prop="id">
          <template #default="scope">
            <el-icon
              color="skyblue"
              style="cursor: pointer"
              @click="removeSelectNode(scope)"
            >
              <delete />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button style="float: left" type="primary" @click="submitMenu()"
        >确认</el-button
      >
      <el-button @click="close()">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
// 获取菜单权限表单数据
import { MenuTree } from "@/components/table/simple/MenuTree";
import { watch } from "vue";

export interface visible {
  menuVisible: boolean;
}
const props = withDefaults(defineProps<visible>(), {});
const emits = defineEmits<{
  (e: "close"): void;
}>();

const {
  menuTree,
  menuTreeRef,
  selectedList,
  menuTreeProps,
  allChecked,
  allNoChecked,
  getMenuTreeData,
  removeSelectNode,
  getMenuBackendAPiTree,
  changeSelectedMenuIds,
  currentRoleAuthorization,
  currentRoleMenu,
  submitMenu,
} = MenuTree();
const close = () => {
  emits("close");
};

watch(
  () => props.menuVisible,
  () => {
    // 关闭之前清空数据，防止打开访问/操作时数据显示不正确
    if (!props.menuVisible) {
      menuTree.value = [];
      selectedList.value = [];
    }
  }
);
defineExpose({
  getMenuTreeData,
  getMenuBackendAPiTree,
  currentRoleAuthorization,
  currentRoleMenu,
});
</script>
<style lang="css" scoped>
.myTree {
  width: 35%;
  display: inline-block;
}
.myButton {
  width: 20%;
  display: inline-block;
}
.myList {
  width: 45%;
  display: inline-block;
}
.centerUp {
  position: absolute;
  left: 340px;
  top: 160px;
  text-align: center;
}
.centerDown {
  position: absolute;
  left: 335px;
  top: 220px;
  text-align: center;
}
</style>
